<template>
  <div class="mx-container">
    <zz-sub-nav :list="list" :index.sync="index">
      <div class="sub-nav-content">
        <div>
          <div class="details-title">{{ $t("zz.access_scenario") }}</div>
          <h4 class="digital-title">{{ $t("zz.scheme.digital.Q") }}</h4>
          <zz-card position="left">
            <img
              src="@/assets/img/digital/digital1-1.png"
              alt=""
              slot="img"
              width="165"
            />
            <div class="" slot="content">
              <p>{{ $t("zz.scheme.digital.intro") }}</p>
              <img src="@/assets/img/digital/digital1-2.png" alt="" />
            </div>
          </zz-card>
        </div>
        <div>
          <div class="details-title">{{ $t("zz.product_function") }}</div>
          <h4 class="digital-title primary">
            {{ $t("zz.scheme.digital.product") }}
          </h4>
          <div class="flex-3">
            <div class="flex-3-item">
              <div class="item-body">
                <div class="item-body-title">
                  {{ $t("zz.scheme.digital.product") }}
                </div>
                <img src="@/assets/img/digital/digital2-1.png" alt="" />
                <div class="item-body-footer">
                  {{ $t("zz.scheme.digital.product.1") }}
                </div>
              </div>
            </div>
            <div class="flex-3-item">
              <div class="item-body">
                <div class="item-body-title">
                  {{ $t("zz.scheme.digital.product.2") }}
                </div>
                <img src="@/assets/img/digital/digital2-2.png" alt="" />
                <div class="item-body-footer">
                  {{ $t("zz.scheme.digital.product.2.1") }}
                </div>
              </div>
            </div>
            <div class="flex-3-item">
              <div class="item-body">
                <div>{{ $t("zz.scheme.digital.product.3.1") }}</div>
                <img src="@/assets/img/digital/digital2-3.png" alt="" />
                <div>{{ $t("zz.scheme.digital.product.3.2") }}</div>
                <img src="@/assets/img/digital/digital2-4.png" alt="" />
                <div>{{ $t("zz.scheme.digital.product.3.3") }}</div>
              </div>
            </div>
          </div>
          <div class="flex flexAC marginTitle">
            <div class="flex-left primary">
              {{ $t("zz.scheme.digital.product.funtion") }}
            </div>
            <div class="flex-right">
              <ul class="show-btn">
                <li>{{ $t("zz.scheme.digital.product.funtion.1") }}</li>
                <li>{{ $t("zz.scheme.digital.product.funtion.2") }}</li>
                <li>{{ $t("zz.scheme.digital.product.funtion.3") }}</li>
                <li>{{ $t("zz.scheme.digital.product.funtion.4") }}</li>
                <li>{{ $t("zz.scheme.digital.product.funtion.5") }}</li>
                <li>{{ $t("zz.scheme.digital.product.funtion.6") }}</li>
                <li>{{ $t("zz.scheme.digital.product.funtion.7") }}</li>
                <li>{{ $t("zz.scheme.digital.product.funtion.8") }}</li>
                <li>{{ $t("zz.scheme.digital.product.funtion.9") }}</li>
                <li>{{ $t("zz.scheme.digital.product.funtion.10") }}</li>
                <li>{{ $t("zz.scheme.digital.product.funtion.11") }}</li>
                <li>{{ $t("zz.scheme.digital.product.funtion.12") }}</li>
                <li>{{ $t("zz.scheme.digital.product.funtion.13") }}</li>
                <li>{{ $t("zz.scheme.digital.product.funtion.14") }}</li>
                <li>{{ $t("zz.scheme.digital.product.funtion.15") }}</li>
              </ul>
            </div>
          </div>
          <h4 class="digital-title primary">
            {{ $t("zz.scheme.digital.product.put") }}
          </h4>
          <img :src="$t('zz.img.digital2-5')" alt="" />
        </div>
        <div>
          <div class="details-title">{{ $t("zz.core_advantage") }}</div>
          <img :src="$t('zz.img.digital3-1')" alt="" />
        </div>
        <div style="min-height: 400px">
          <div class="details-title">{{ $t("zz.application_scenarios") }}</div>
          <ul class="header-nav-wrapper">
            <li
              v-for="(item, i) in list[3].child"
              :key="i"
              :class="item.index == subIndex ? 'active' : ''"
              @click="navClick(item)"
            >
              {{ item.name }}
            </li>
          </ul>
          <div v-if="subIndex == 1">
            <div>
              <zz-card titleSize="small">
                <span slot="title">{{ $t("zz.scheme.game.pain.title") }}</span>
                <ul slot="content">
                  <li>1、{{ $t("zz.scheme.digital.use.1.1.1") }}</li>
                  <li>2、{{ $t("zz.scheme.digital.use.1.1.2") }}</li>
                  <li>3、{{ $t("zz.scheme.digital.use.1.1.3") }}</li>
                </ul>
                <img
                  src="@/assets/img/digital/digital4-1.png"
                  alt=""
                  slot="img"
                  width="351"
                />
              </zz-card>
            </div>
            <div>
              <zz-card titleSize="small">
                <span slot="title">{{ $t("zz.scheme.digital.use.1.2") }}</span>
                <div slot="content">
                  {{ $t("zz.scheme.digital.use.1.2.des") }}
                </div>
                <img
                  src="@/assets/img/digital/digital4-2.png"
                  alt=""
                  slot="img"
                  width="351"
                />
              </zz-card>
            </div>
          </div>
          <div v-if="subIndex == 2">
            <div class="marginTitle">
              <zz-card>
                <div slot="content">
                  <sim-card
                    :title="$t('zz.scheme.digital.use.2.1')"
                    :content="$t('zz.scheme.digital.use.2.1.1')"
                  ></sim-card>
                  <sim-card
                    :title="$t('zz.scheme.digital.use.2.2')"
                    :content="$t('zz.scheme.digital.use.2.2.1')"
                  ></sim-card>
                </div>
                <img
                  src="@/assets/img/digital/digital4-3.png"
                  alt=""
                  slot="img"
                  width="403"
                />
              </zz-card>
            </div>
            <div class="marginTitle">
              <zz-card>
                <div slot="content">
                  <sim-card
                    :title="$t('zz.scheme.digital.use.2.3')"
                    :content="$t('zz.scheme.digital.use.2.3.1')"
                  ></sim-card>
                  <sim-card
                    :title="$t('zz.scheme.digital.use.2.4')"
                    :content="$t('zz.scheme.digital.use.2.4.1')"
                  ></sim-card>
                </div>
                <img
                  src="@/assets/img/digital/digital4-4.png"
                  alt=""
                  slot="img"
                  width="403"
                />
              </zz-card>
            </div>
          </div>
        </div>
        <div>
          <div class="details-title">{{ $t("zz.solution") }}</div>
          <div class="flex-3 fanan-wrap">
            <div class="flex-3-item">
              <img :src="$t('zz.img.digital5-1')" alt="" />
            </div>
            <div class="flex-3-item">
              <img :src="$t('zz.img.digital5-2')" alt="" />
            </div>
            <div class="flex-3-item">
              <img :src="$t('zz.img.digital5-3')" alt="" />
            </div>
            <div class="flex-3-item">
              <img :src="$t('zz.img.digital5-4')" alt="" />
            </div>
            <div class="flex-3-item">
              <img :src="$t('zz.img.digital5-5')" alt="" />
            </div>
            <div class="flex-3-item">
              <img :src="$t('zz.img.digital5-6')" alt="" />
            </div>
          </div>
        </div>
      </div>
    </zz-sub-nav>
  </div>
</template>

<script>
import SubNav from "@/components/SubNav/index.vue";
import ZzCard from "@/components/ZzCard";
import SimCard from "@/components/SimCard";

export default {
  data() {
    return {
      index: 1,
      subIndex: 1,
    };
  },

  components: {
    "zz-sub-nav": SubNav,
    ZzCard,
    SimCard,
  },
  props: {},
  mounted() {},
  computed: {
    activeItem: function () {
      let activeItem = this.list.find((v) => v.index == this.index);
      console.log(this.list[this.index]);
      this.subIndex = activeItem.child ? activeItem.child[0].index : 1;
      return activeItem;
    },
    list: function () {
      return [
        { name: this.$t("zz.product_presentation"), index: 1 },
        { name: this.$t("zz.product_function"), index: 2 },
        { name: this.$t("zz.core_advantage"), index: 3 },
        {
          name: this.$t("zz.application_scenarios"),
          index: 4,
          child: [
            { name: this.$t("zz.scheme.digital.4.1"), index: 1 },
            { name: this.$t("zz.scheme.digital.4.2"), index: 2 },
          ],
        },
        { name: this.$t("zz.solution"), index: 5 },
      ];
    },
  },
  watch: {},
  methods: {
    navClick(a_item) {
      console.log(a_item);
      this.subIndex = a_item.index;
    },
  },
  destroyed() {},
};
</script>
<style lang='scss' scoped>
@import "@/style/variables.scss";

.sub-nav-content {
  padding: 12px 48px;
  flex: 1;
  width: 100%;
  .pro-title {
    color: $color;
    font-size: 20px;
    padding: 20px 45px;
    border-bottom: 1px solid $border;
  }
  .pro-intro-wrap {
    padding: 30px 48px;
  }
  img {
    max-width: 100%;
  }
}

.digital-title {
  font-size: 20px;
  line-height: 150%;
  margin-bottom: 30px;
}
.item-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 417px;
  color: rgba(80, 80, 80, 1);
  box-shadow: #64a8f3 0px 0px 1px 2px;
  font-size: 14px;
  line-height: 150%;
  text-align: center;
  padding: 20px 15px;
}

.flex-left {
  width: 18px;
  font-size: 18px;
  line-height: 150%;
  font-weight: bold;
  margin: 0 25px 0 0;
}
.flex-right {
  .show-btn {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 144px;
      height: 46px;
      color: #fff;
      background-color: #64a8f3;
      border-radius: 10px;
      font-size: 14px;
      line-height: 46px;
      text-align: center;
      margin: 10px 10px 0 0;
    }
  }
}
.fanan-wrap {
  & > div {
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 768px) {
  .digital-title {
    margin-bottom: 0.3rem;
  }
  .show-btn {
    li {
      width: 45% !important;
    }
  }
}
</style>